import React, { Component } from 'react';
import axios from 'axios';
import { List, Stepper, Checkbox,NavBar,Icon} from 'antd-mobile';

const CheckboxItem = Checkbox.CheckboxItem;
export default class Tabs2 extends Component{
    onChange = (val) => {
        console.log(val);
      }
    constructor() {
        super();

        this.state = {
          val: 1,
          error: null,
          isLoaded: false,
          records: [],
          total:0
        };
      }
      onChange = (val) => {
        // console.log(val);
        this.setState({ val });
      }
      componentDidMount() {
        axios.get( `http://localhost:3000/product/${this.props.match.params.id}`).then(
          res => {
            this.setState({
              isLoaded: true,
              records: res.data,
            });
          }
        ).catch(
          error => {
            this.setState({
              isLoaded: true,
              error
            })
          }
        )
      }
      render() {

        const { error, isLoaded, records } = this.state;
        if (error) {
          return <div>{ error.message }</div>;
        } else if (!isLoaded) {
          return <div>loading...</div>
        } else {
            const data = [
                { value: 1, label:
                    <div>
                     <div key={this.state.records.id} style={{ padding: '0 15px' }}>
                            <div style={{ display: '-webkit-box', display: 'flex', padding: '15px 0' }}>
                            <img style={{ height: '64px',width:'64px',marginRight: '15px' }} src={this.state.records.img} alt="" />
                            <div style={{ lineHeight: 1 }}>
                                <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{this.state.records.title}</div>
                                <div>
                                    <span style={{ fontSize: '30px', color: '#FF6E27' }}>
                                        ¥{this.state.records.price.number}
                                    </span>
                                    <List>
                                        <List.Item
                                            wrap
                                            extra={
                                                <Stepper
                                                style={{ width: '80px' }}
                                                showNumber
                                                max={10}
                                                min={1}
                                                value={this.state.val}
                                                onChange={this.onChange}
                                                />}
                                            >
                                        </List.Item>
                                    </List>
                                </div>
                            </div>
                            </div>
                    </div>
               </div> },
              ];
              const data1 = [
                  {
                      value:1,
                      label:
                         <div>全选&nbsp;&nbsp;&nbsp;共<span>{this.state.val}</span>件，合计：<b>{this.state.records.price.number*this.state.val}</b>&nbsp;&nbsp;&nbsp;<button style={{background:'red',color:'#fff',borderRadius:'3px '}}>去结算</button></div>
                    }
                ]
          return (
            <div>
            <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => console.log('onLeftClick')}
            rightContent={[
                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                <Icon key="1" type="ellipsis" />,
            ]}
            >购物车</NavBar>
            <List renderHeader={() => ''}>
              {data.map(i => (
                <CheckboxItem key={i.value} >
                  {i.label}
                </CheckboxItem>
              ))}</List>
            <div style={{position:'fixed',bottom:'50px'}}>
                <List renderHeader={() => ''}>
                {data1.map(i => (
                    <CheckboxItem key={i.value} >
                    {i.label}
                    </CheckboxItem>
                ))}
                </List>
            </div>
          </div>
          );
        }
      }
    }
